<template>
  <v-app class="app">
    <div v-if="showLanguage">
      <DialogLanguage @onChangeLanguage="changeLanguage" />
    </div>
    <div>
      <Header @onDrawer="drawerShow" @onChangeLanguage="changeLanguage" />
    </div>
    <div v-if="drawer" class="dialog">
      <div class="">
        <div
          v-for="(drawItem, index) in drawerList"
          :key="index"
          class="dialog_item"
        >
          <div>{{ drawItem }}</div>
        </div>
      </div>
    </div>
    <DataInfo />
    <div>
      <Banner />
    </div>
    <div>
      <Section3 />
    </div>
    <div>
      <Section4 />
    </div>
    <div>
      <Footer />
    </div>
  </v-app>
</template>
<script>
import Header from "./component/header";
import DataInfo from "./component/dataInfo";
import Banner from "./component/banner";
import Section3 from "./component/section3";
import Section4 from "./component/section4";
import Footer from "./component/footer";
import DialogLanguage from "@/components/dialogLanguage";
export default {
  data: () => ({
    drawer: false,
    showLanguage: false,
    drawerList: [
      "HOME",
      "METAVERSE",
      "TOKEN",
      "ROADMAP",
      "FAQ",
      "BLIND BOX",
      "POOL",
      "BOUNTY",
      "DOCS",
    ],
  }),
  components: {
    Header,
    DataInfo,
    Banner,
    Section3,
    Section4,
    Footer,
    DialogLanguage,
  },
  methods: {
    drawerShow(value) {
      this.drawer = value;
    },
    changeLanguage(type) {
      this.showLanguage = type;
    },
  },
};
</script>
<style scoped lang="scss">
@import "./../../common/styles/common.scss";
.dialog {
  position: fixed;
  top: 68px;
  left: 0;
  background: rgba(0, 0, 0, 0.8);
  width: 100vw;
  height: 100vh;
  z-index: 10;
  .dialog_item {
    height: 40px;
    text-align: center;
    line-height: 40px;
    color: #431216;
    font-weight: 700;
    background: #fad551;
    z-index: 2;
  }
}
.app {
  width: 100%;
  min-height: 100vh;
  background: #f7f7f7 !important;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}
</style>